import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Col, Row } from "antd";
import * as React from "react";
import { getDoctorOrHospitalComment } from "../../axios/Request";
import Estimage from "../../component/Estimage";
import { AppointmentComment } from "../../type/CommonData";
import RecommendUser from "../doctor-detail/RecommendUser";
import ChooseDoctorHeader from "./ChooseDoctorHeader";

const styles = (theme: Theme) =>
  createStyles<"root" | "estimate" | "estimateLeft" | "estimateRight">({
    root: {},
    estimate: {
      display: "flex",
      padding: "5px 20px 5px 20px"
    },
    estimateLeft: {
      padding: "0px 10px 0px 10px"
    },
    estimateRight: {
      display: "flex",
      flexDirection: "column",
      alignContent: "space-between"
    }
  });

const doctorData = {
  avatarUrl: "string",
  depart: "产科门诊",
  departId: "1434234",
  detail:
    "flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小",
  experts: ["string"],
  hospitalId: "string",
  hospitalName: "青岛市妇女儿童医院",
  id: "string",
  introduction:
    "flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小",
  level: "string",
  major: "string",
  name: "孙士雄",
  schedules: [
    {
      date: "2018-10-15T06:20:55.798Z",
      id: "string",
      time: "string"
    }
  ],
  skillful: "string",
  title: "主任医师/教授"
};
const hospital = {
  name: "第一人民医院",
  location: "金李井镇中心校",
  category: "三甲医院",
  avatarUrl: "/images/hospital1.jpg",
  phone: "13348916944",
  level: "综合医院",
  code: "23",
  id: "sd",
  introduction:
    "使用 Flex 创建的 RIA 可运行于装有 Adobe Flash Player 插件的浏览器中，或运行于跨操作系统的 Adobe AIR上，它们可以跨所有主流浏览器、操作系统实现一致的运行。通过利用 AdobeAIR，Flex应用程序可以访问本地数据和系统资源。Flex技术的三大组成部分：UI、数据、服务器技术介绍。从根本上说，Flex技术是表现层解决方案，像所有其他类似技术一样，表现层技术要解决三个基本问题：表现层界面展示和人机交互，客户端数据操作及服务器端数据交互和整合。Flex针对这三个根本问题提供了卓越的解决方案",
  max: 23,
  outpatient: {},
  parkingLot: 23,
  stars: "223",
  top: []
};
interface Iprops extends WithStyles<typeof styles> {}
interface Istates {
  commentData: AppointmentComment[];
}
/**
 * 医院评价组件
 */
class EstimateHospital extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      commentData: []
    };
  }

  public componentWillMount() {
    getDoctorOrHospitalComment({}).then(value => {
      this.setState({
        commentData: value.data.content
      });
    });
  }
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <ChooseDoctorHeader data={hospital} />
        <Row>
          <Col span={18}>
            <Estimage data={this.state.commentData} />
          </Col>
          <Col span={6}>
            <RecommendUser
              title={"推荐专家"}
              data={[doctorData, doctorData, doctorData]}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default withStyles(styles)(EstimateHospital);
